<template>
	<view class="bxjl">
		<view class="tabs-con">
			<u-tabs :list="tabList" @click="tabsChange" lineWidth="80rpx" lineHeight="6rpx" lineColor="#F34B47" :itemStyle="{
				flex: 1,
				height: '88rpx'
			}"></u-tabs>
		</view>
		<view class="bx-list main-pd" v-if="dataList.length && !loading">
			<view class="bx-item" v-for="item in dataList" :key="item.id">
				<view :class="['status', statusClass(item.state)]">
					<view class="u-flex u-flex-between">
						<view class="u-flex">
							<u-image :src="statusImg(item.state)" width="32rpx" height="32rpx"></u-image>
							<text class="u-m-l-10">{{ bxStatus(item.state) }}</text>
						</view>
						<view class="color-f34b47 font-28" 
						@click="$u.route('/pages/ykbx/mydpj', { id: item.id })"
						v-if="item.state == 2">满意度评价</view>
					</view>
				</view>
				<view class="font-32 color-333 u-m-t-24 u-m-b-10 u-line-1">{{ item.title }}</view>
				<view class="color-8c8c8c font-28 u-p-b-10">{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd') }}</view>
				<view class="u-flex u-flex-end" @click="$u.route('/pages/ykbx/bxjlDetail?id='+item.id)">
					<u-text suffixIcon="arrow-right" :iconStyle="{
						color: '#bfbfbf',
						fontSize: '30rpx'
					}" align="right" size="28rpx" color="#bfbfbf" text="查看详情"></u-text>
				</view>
			</view>
		</view>
		<view class="u-m-30" v-if="loading">
        <u-skeleton rows="5" title loading></u-skeleton>
      </view>
      <view class="empty-con" v-if="!dataList.length && !loading">
        <u-empty mode="list"></u-empty>
      </view>
	</view>
</template>

<script setup>
import { ref, computed } from "vue"
import { onLoad } from "@dcloudio/uni-app"
import useInfoStore from "@/store/user"
import icon0 from "@/static/images/icon12.png"
import icon1 from "@/static/images/icon13.png"
import icon2 from "@/static/images/icon14.png"
import { useList } from "@/hooks/useList"
import { getBxListApi } from "@/api/index"
const userStore = useInfoStore()
const {loadData,dataList,page,loading} = useList({
	listApi: getBxListApi
})
// tabs 列表
const tabList = ref([
	{
		name: "全部",
		state:""
	},
	{
		name: "待处理",
		state:0
	},
	{
		name: "处理中",
		state: 1
	},
	{
		name: "已处理",
		state: 2
	},
])
const tabsChange = (val) => {
	page.value= 1;
	dataList.value = [];
	loading.value = true;
	loadData({
		param: JSON.stringify({
			dzyzkId: userStore.dzyzkId,
			state: val.state
		})
	})
}
const bxStatus = computed((status) => {
	return function (status) {
		let statusArr = ["待处理", "处理中", "已处理"];
		return statusArr[status]
	}
})
const statusClass = computed((status) => {
	return function (status) {
		return "status" + status
	}
})
const statusImg = computed((status) => {
	return function (status) {
		let statusImgArr = [icon0, icon1, icon2];
		return statusImgArr[status]
	}
})

onLoad(()=>{
	page.value = 1
	dataList.value = []
	loadData({
		param:JSON.stringify({
			dzyzkId: userStore.dzyzkId,
			state:''
		})
	})
})
</script>

<style lang="scss" scoped>
.bxjl {
	.tabs-con {
		background-color: #fff;
		height: 88rpx;
	}

	.bx-list {
		margin-top: 28rpx;
		padding-bottom: 80rpx;
		.bx-item {
			background-color: #fff;
			padding: 32rpx;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
		}
	}

	.status {
		font-size: 28rpx;
		line-height: 32rpx;
	}

	.status0 {
		color: #FF4D4F;
	}

	.status1 {
		color: #FAAD14;
	}

	.status2 {
		color: #52C41A;
	}

}
</style>
